<template>
  <view>
    <view class="p-2">
      <view class="text-2xl text-center my-3">
        width
      </view>
      <view class="h-50 bg-blue-200 mb-3 w-xs">
        w-xs
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-sm">
        w-sm
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-md">
        w-md
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-lg">
        w-lg
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-xl">
        w-xl
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-2xl">
        w-2xl
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-3xl">
        w-3xl
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-4xl">
        w-4xl
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-200">
        w-200
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-500">
        w-500
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-1_4">
        w-1_4
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-1/4">
        w-1/4
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-1_3">
        w-1_3
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-1/3">
        w-1/3
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-1_2">
        w-1_2
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-1/2">
        w-1/2
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-half">
        w-half
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-auto">
        w-auto
      </view>

      <view class="h-50 bg-blue-200 mb-3 w-full">
        w-full
      </view>
    </view>

    <view class="p-1">
      <view class="text-2xl text-center my-3">
        height
      </view>
      <view class="flex flex-wrap h-600 bg-green-500">
        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-xs">
          h-xs
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-sm">
          h-sm
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-md">
          h-md
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-lg">
          h-lg
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-xl">
          h-xl
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-200">
          h-200
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-500">
          h-500
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-1_4">
          h-1_4
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-1/4">
          h-1/4
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-1_3">
          h-1_3
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-1/3">
          h-1/3
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-1_2">
          h-1_2
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-1/2">
          h-1/2
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-half">
          h-half
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-auto">
          h-auto
        </view>

        <view class="bg-green-200 mb-3 flex-1 mr-1 text-xs text-center h-full">
          h-full
        </view>
      </view>
    </view>

    <view class="p-3 flex flex-col items-center">
      <view class="text-2xl text-center my-3">
        Box Sizing
      </view>
      <view class="box-border w-550 h-550 p-4 bg-blue-300 mb-2 center">
        border-box w-550 h-550 p-4
      </view>

      <view class="box-content w-550 h-550 p-4 bg-blue-300 center">
        content-box w-550 h-550 p-4
      </view>
    </view>
  </view>
</template>

